<script setup>
import { Modal, message } from 'ant-design-vue';
import { onMounted, ref, reactive } from 'vue';
import { wxlist } from '@/common/http.api.js'
import tlTable from '@/components/Table/tlTable.vue'
import { formatDateTime } from '@/utils/formattime.js'


// 表格
const isRefrensh = ref(0);
const pageData = reactive({ page: 1, limit: 5 });
const searchData = ref([
  {
    label: "姓名:",
    prop: "uname",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "住址:",
    prop: "home",
    type: "input-complete",
    options: [],
    value: ""
  },
  {
    label: "电话:",
    prop: "phone",
    type: "input-complete",
    options: [],
    value: "",
  },

  {
    label: "发烧:",
    prop: "fever",
    type: "select",
    value: "",
    options: [{
      label : '是',
      value : '是'
    },
    {
      label : '否',
      value : '否'
    },
    {
      label : '全部',
      value : ''
    }],
  },
  {
    label: "家人发烧:",
    prop: "home_fever",
    type: "select",
    value: "",
    options: [{
      label : '是',
      value : '是'
    },
    {
      label : '否',
      value : '否'
    },
    {
      label : '全部',
      value : ''
    }],
  },
  {
    label: "健康码颜色:",
    prop: "color",
    type: "select",
    options: [{
      label : '绿色',
      value : '绿色'
    },
    {
      label : '黄色',
      value : '黄色'
    },
    {
      label : '红色',
      value : '红色'
    },
    {
      label : '全部',
      value : ''
    }],
    value: "",
  },
  {
    type: "clear-btn",
    style:{"right":'160px', "top":'25px'}
  },
  {
    type: "search-btn",
    style:{"right":'85px'}
  },
]);

const columns = ref([
  {
    title: "序号",
    width: "10%",
    customRender: (v) => {
      return <div>{`${v.index + 1}`}</div>;
    },
  },
  {
    title: "姓名",
    dataIndex: "uname",
    key: "uname",
  },
  {
    title: "身份证",
    dataIndex: "identity",
    key: "identity",
    align : 'center'
  },
  {
    title: "电话",
    dataIndex: "phone",
    key: "phone",
    align : 'center'
  },
  {
    title: "住址",
    dataIndex: "home",
    key: "home",
  },
  {
    title: "发烧",
    dataIndex: "fever",
    key: "fever",
    align : 'center',
  },  
  {
    title: "家人发烧",
    dataIndex: "home_fever",
    key: "home_fever",
    align : 'center'
  },
  {
    title: "健康码",
    dataIndex: "color",
    key: "color",
    align : 'center'
  },
  {
    title: "上报时间",
    dataIndex: "heal_time",
    key: "heal_time",
    align : 'center',
    renderDom : (h,row)=>{
      if(row.heal_time === null){
        return '--'
      }
      return <div>{formatDateTime(row.heal_time)}</div>
    }
  },
]);
</script>

<template>
  <div>
    <div><tl-table :columns="columns" :pageData="pageData" :searchData="searchData" :isRefrensh="isRefrensh"
        :renderTable="wxlist">
        <template v-slot:title>居民用户</template>
      </tl-table>
    </div>
  </div>
</template>

